<template>
    <div class="login">
        <transition name="el-zoom-in-center">
            <div v-show="show2" class="transition-box">
                <h2>管理系统登录页面</h2>
                <el-input class="m-bu" v-model="username" placeholder="请输入账号"></el-input>
                <el-input class="m-bu" type="password" placeholder="请输入密码" v-model="password" clearable></el-input>
                <el-button :loading="login_dl" @click="login">登录</el-button>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    data(){
        return {
             show2:false,
             username:"",
             password:"",
             login_dl:false
        }
    },
    created(){
        setTimeout(()=>{
            this.show2 = true
        },600)
    },
    methods:{
        login(){
            this.login_dl = true
            localStorage.username = this.username
            let _this = this
            setTimeout(()=>{
                _this.$router.push('/index')
            },1000)
        }
    }
}
</script>

<style scoped>
.login{
    width:100%;
    height:100%;
    background:url("./bg.jpg") no-repeat center;
    background-size: cover;
    overflow: hidden;
    position: relative;
}
.login .m-bu{
    margin-bottom:20px;
}
.login h2{
    margin-bottom:20px;
}
.login button{
    width:100%;
}
.transition-box {
    margin-bottom: 10px;
    width: 420px;
    height: 320px;
    border-radius: 4px;
    background-color: rgba(255,255,255,0.5);
    text-align: center;
    color: #fff;
    padding: 40px 80px;
    box-sizing: border-box;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-210px;
    margin-top:-180px;
}
</style>